<template>
  <div class="album-list">
    <ul class="list">
      <li v-for="d, i in list" :key="d.id" @click="currentIndex = i">
        <div
          class="cover"
          :style="{ 'background-image': `url(${d.cover})` }"
        ></div>
        <div class="info">
          <div class="name">{{ d.album }} - {{ d.singer }}</div>
          <div class="price">
            <p>¥{{ d.price }}</p>
            <!-- <StepInput /> -->
            <step-input
              :num="d.number"
              @change="onChange($event, i, d.stock)"
              :max="d.stock"
            ></step-input>
          </div>
        </div>
      </li>
    </ul>
    <ul class="list">
      <li>
        <div class="abel">总数</div>
        <div class="abel">{{ total.number }}</div>
      </li>
      <li>
        <div class="abel">总价</div>
        <div class="abel">{{ total.price }}</div>
      </li>
    </ul>

    <!-- 使用 ref 给子组件命名 -->
    <album-detail
      ref="detail"
      :album="list[currentIndex]"
      v-if="currentIndex > -1"
      @close="currentIndex = -1"
      @change="list[currentIndex].star = $event"
    />
  </div>
</template>

<script>
import StepInput from "@/components/StepInput.vue";
import AlbumDetail from '@/components/AlbumDetail.vue';

// @代表 src 路径
import list from "@/views/album-list.js";
export default {
  components: {
    // "step-input": StepInput
    StepInput,
    // StepInput  是 "step-input": StepInput 的简写

    AlbumDetail
  },
  methods: {
    onChange($event, i) {
      // if ($event < 0) $event = 0;
      // if ($event > n) $event = n;
      this.list[i].number = $event;
    }
  },
  computed: {
    total() {
      let number = 0, price = 0;
      this.list.forEach(item => {
        number += item.number;
        price += item.number * item.price;
      })
      return {
        number,
        price
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler(arr, ) {
        // console.log(arr, a)
        localStorage.setItem('album-list', JSON.stringify(arr));
      }
    }
  },
  data() {
    // 先从localStorage取值，如果得到null说明不存在，使用默认初识数据list
    const st = localStorage.getItem('album-list');
    const dt = st ? JSON.parse(st) : list;

    return {
      list: dt,
      currentIndex: -1
    };
  },
  updated() {
    // 子组件可以通过 ref 命名
    // 这样就可以使用 this.$refs.命名   得到子组件的实例
    // console.log('refs', this.$refs.detail.$el);
    // console.log('root', this.$root)
  }
};
</script>

<style lang="sass" scoped>
.album-list
  background: #eee
  max-width: 500px
  margin: 0 auto
  padding: 15px

  .list

    // width: 360px
    padding: 15px

    background: #fff
    margin: 0 auto
    & + .list
      margin-top: 20px
    &:last-child li:last-child
      font-weight: bold
    li
      display: flex
      align-items: center
      justify-content: space-between
      padding: 20px 0
      // margin-bottom: 20px
      & + li
        border-top: 1px solid #ddd
      .cover
        width: 80px
        height: 80px
        border-radius: 50%
        background-size: cover
        background-color: #eee
      .info
        flex: 1
        padding-left: 20px
        text-align: left
        .price
          display: flex
          justify-content: space-between
          align-items: center
</style>
